<!-- 员工列表页 -->
<template>
  <view v-if="shenheStatus == 0" class="page-list">
    <u-sticky offset-top="0">
      <view class="search-section">
        <view class="input-box">
          <u-search
            :placeholder="$t('mdAdmin.nickname')"
            v-model="keyword"
            :show-action="false"
            @search="gotoSearch"
          ></u-search>
        </view>
      </view>
    </u-sticky>
    <view class="list-section">
      <view class="list-item" v-for="(item, index) in listData" :key="index">
        <view class="item-body">
          <image class="item-img" :src="item.avatar" mode="" />
          <view class="item-info">
            <view class="name">{{ item.name }}</view>
            <view class="mobile"
              >{{ $t('share.regTime') }}：{{ item.create_time }}</view
            >
          </view>
        </view>
        <view class="item-foot">
          <view class="clerk-num">
            <text>{{ $t('mdAdmin.order') }}：</text>
            <text>{{ item.order_count }}</text>
            <text>{{ $t('share.consume') }}：</text>
            <text>¥{{ item.order_price }}</text>
          </view>
        </view>
      </view>
      <view v-if="!listData.length">
        <u-empty mode="data"> </u-empty>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from '@/components/shenhe/shenhe';
export default {
  components: { Shenhe },
  data() {
    return {
      listData: [],
      page: 1,
      pageSize: 20,
      row_count: 0,
      keyword: '',
    };
  },
  onLoad(t) {
    this.getMdUserList();
  },
  computed: {},
  onShow() {},
  watch: {},
  onReachBottom() {
    if (this.page * this.pageSize >= this.row_count) return;
    this.page++;
    let params = {
      loadMore: true,
    };
    if (this.keyword) {
      params.keyword = this.keyword;
    }
    this.getMdUserList(params);
  },
  methods: {
    getMdUserList(params) {
      uni.showLoading({
        title: this.$t('home.loading'),
      });
      let reqParams = { page: this.page };
      if (params) {
        reqParams = { ...reqParams, ...params };
      }
      this.$allrequest.mdAdmin.getMdUserList(reqParams).then(res => {
        uni.hideLoading();
        if (!res.code) {
          if (reqParams?.loadMore) {
            this.listData = [...this.listData, ...res.data.list];
          } else {
            this.listData = res.data.list;
          }
          this.row_count = res.data.row_count;
        }
      });
    },
    gotoSearch() {
      this.page = 1;
      this.getMdUserList({ keyword: this.keyword });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-list {
  width: 100%;
  min-height: 100vh;
  background: #f2f2f2;
  .search-section {
    width: 100%;
    background-color: #ffffff;
    padding: 10rpx 30rpx;
    .input-box {
      width: 100%;
    }
  }
  .list-section {
    width: 100%;
    padding-top: 24rpx;
    .list-item {
      width: 100%;
      background-color: #ffffff;
      padding: 30rpx 30rpx 24rpx 30rpx;
      margin-bottom: 24rpx;
      .item-body {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f8f8f8;
        padding-bottom: 30rpx;

        .item-img {
          width: 92rpx;
          height: 92rpx;
          background: #f2f2f2;
          border-radius: 50%;
        }
        .item-info {
          margin-left: 24rpx;
          min-height: 92rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .name {
            font-size: 28rpx;
            font-family: PingFang SC;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.94);
          }
          .mobile {
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 400;
            color: rgba(140, 140, 140, 0.94);
            margin-top: 8rpx;
          }
        }
      }
      .item-foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-top: 24rpx;
        .clerk-num {
          display: flex;
          align-items: center;
          text:nth-child(2) {
            color: #f0250e;
            margin-right: 10rpx;
          }
          text:nth-child(4) {
            color: #f0250e;
          }
        }
      }
    }
  }
}
</style>
